<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>个人中心</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="info">
                <div class="content">
                    <img src="../assets/img/user.png">
                    <div>
                        <p>{{ name }}</p>
                        <p>账号: {{ phone }}</p>
                    </div>
                </div>
            </div>
            <ul>
                <li>
                    <div class="left" @click="()=>router.push('/appointmentlist')">
                        <i class="fa fa-user-plus"></i>
                        <p>我的预约</p>
                    </div>
                    <div class="right" @click="()=>router.push('/appointmentlist')">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </li>
                <li>
                    <div class="left" @click="()=>router.push('/index')">
                        <i class="fa fa-volume-control-phone"></i>
                        <p>我的服务</p>
                    </div>
                    <div class="right" @click="()=>router.push('/index')">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </li>
                <li>
                    <div class="left" @click="()=>router.push('/index')">
                        <i class="fa fa-bed"></i>
                        <p>我的医生</p>
                    </div>
                    <div class="right" @click="()=>router.push('/index')">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </li>
                <li>
                    <div class="left" @click="()=>router.push('/appointmentlist')">
                        <i class="fa fa-sticky-note"></i>
                        <p>问诊订单</p>
                    </div>
                    <div class="right" @click="()=>router.push('/appointmentlist')">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </li>
                <li>
                    <div class="left" @click="()=>router.push('/appointmentlist')">
                        <i class="fa fa-cart-plus"></i>
                        <p>商城订单</p>
                    </div>
                    <div class="right" @click="()=>router.push('/appointmentlist')">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </li>
                <li>
                    <div class="left" @click="onLogout">
                        <i class="fa fa-sign-out"></i>
                        <p>退出登录</p>
                    </div>
                    <div class="right" @click="onLogout">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </li>
            </ul>
        </section>
        
        <div class="bottom-ban"></div>
        <footer>
            <ul>
                <li @click="()=>{router.push('/hospital')}">
                    <i class="fa fa-home"></i>
                    <p>云医院</p>
                </li>
                <li @click="()=>{router.push('/setmeal')}">
                    <i class="fa fa-opencart"></i>
                    <p>商城</p>
                </li>
                <li @click="()=>{router.push('/index')}">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li @click="()=>{router.push('/personal')}">
                    <i class="fa fa-user"></i>
                    <p>我</p>
                </li>
            </ul>
        </footer>
    </div>
</template>

<script setup>
import router from "@/router";
import { useStore } from "vuex";
import { computed } from "vue";

const store = useStore();

const name = computed(() => JSON.parse(sessionStorage.getItem("userInfo")).realname);
const phone = computed(()=>JSON.parse(sessionStorage.getItem('userInfo')).phone)

const onLogout = () => {
  store.dispatch("logout");
  router.push("/login");
};

</script>

<style src="../assets/css/personal.css" scoped>
</style>